<template>
    <div style="width:100%">
        <div class="head">
            <span>管理员页面</span>
            <span>欢迎 {{name}}</span>
            <a href="#" @click="quit">注销登录</a>
            <a href="#" class="changepwd" @click="changepwd">修改密码</a>
        </div>
        <div class="mid">
            <Menu style="width:15%;position: absolute;top: 0;left: 2%;" :theme="theme3" v-model="theme3" active-name="1"  class="pagectr">
            <!-- <MenuGroup title=""> -->
                <MenuItem name="1"  @click.native="showpower">
                    <span>权限管理</span>
                </MenuItem>
                <MenuItem name="2">
                    <span></span> 
                </MenuItem>
                <MenuItem name="3">
                    <span></span> 
                </MenuItem>
                <MenuItem name="4">
                   <span></span> 
                </MenuItem>
            <!-- </MenuGroup> -->
            </Menu>
            <div   v-show="pagepower">
                <Button class="btn1" type="warning" @click = "save">保存</Button>
                <Button class="btn2" type="warning" @click = "synchronization">同步</Button>
                <Table class="power"  border :columns="col" :data="datat"></Table>
            </div>
        </div>
       
    </div>
</template>

<script>
import { setCookie,getCookie,delCookie } from '../assets/cookie.js'
import {url} from "./url.js"
    export default {
        data(){
            return{
                pagepower:true,
                social:'',
                theme3: 'dark',
                name:'',
                // url:'http://172.16.9.5:7777',
                url:url,//服务器
                col: [
                    {
                        align: 'center',
                        title: '成员',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        align: 'center',
                        title: '邮箱',
                        key: 'email',
                        render: (h, params) => {
                            return h('div', [
                                h('strong', params.row.email)
                            ]);
                        }
                    },
                    {
                        align: 'center',
                        title: '领域',
                        key: 'filed',
                        render: (h, params) => {
                            var self = this
                            return h('div', [
                                 h('Input',{
                                     props:{
                                         value:params.row.filed
                                     },
                                     on:{
                                         'input':function(val){
                                            const index = params.index
                                            params.row.filed = val
                                            self.datat[index] = params.row
                                         }
                                     }
                                 })
                            ])
                        }
                    },
                    {
                        align: 'center',
                        title: '入职状态',
                        key: 'workstatus',
                        render:(h,params) =>{
                            var self = this;
                            return h('div', [
                                 h('Input',{
                                     props:{
                                         value:params.row.workstatus
                                     },
                                     on:{
                                         'input':function(val){
                                             const index = params.index
                                             params.row.workstatus = val
                                             self.datat[index]= params.row
                                         }
                                     }
                                 })
                            ])
                        }
                    },
                    {
                        title: '发布课程',
                        key: 'ispublish',
                        render:(h, params) => {
                            // console.log(params)
                            var self = this;
                            return h('div', [
                                h('checkbox',{
                                    props:{
                                        value:params.row.ispublish
                                    },
                        　　　　　　　on: {
                                        'input': function (val) {
                                            debugger 
                                            /*这里获取了对应index 然后直接修改了datat中的数据*/
                                            const index = params.index
                                            self.datat[index].ispublish = val
                                        }
                                    }
                                })
                            ]);
                        }
                    },
                    {
                        title: '代报名',
                        key: 'issignup',
                        render:(h, params) => {
                            // console.log(params.row)
                            var self =this;
                            return h('div', [
                                h('checkbox',{
                                    props:{
                                        value:params.row.issignup
                                    },
                        　　　　　　　on: {
                                        'input': function (val) {
                                            const index = params.index
                                            self.datat[index].issignup = val
                                        }
                                    }
                                })
                            ]);
                        }
                    },
                    {
                        title: '报表',
                        key: 'isreport',
                        render:(h, params) => {
                            // console.log(params.row)
                           var self =this;
                            return h('div', [
                                h('checkbox',{
                                    props:{
                                        value:params.row.isreport
                                    },
                        　　　　　　　on: {
                                        'input': function (val) {
                                            const index = params.index
                                            self.datat[index].isreport = val
                                        }
                                    }
                                })
                            ]);
                        }
                    }
                ],
                datat:[]
            }
       },
       mounted(){
            /*页面挂载获取保存的cookie值，渲染到页面上*/
            var uname = getCookie('mobile')
            this.name = uname
            /*如果cookie不存在，则跳转到登录页*/
            if(uname == ""){
                this.$router.push('/')
            }
             this.tabledata();
       },
        methods:{
            save(){
                var self = this;
                var newdata = self.datachange(self.datat)
                self.$http.post(
                    this.url+'/auths/update',//gjx-guest  
                newdata,
                ).then(function (res) {
                     self.tabledata()
                    }).catch(function (error) {
                        });
            },
            synchronization(){
                var self = this;
                self.$http.get(
                    this.url+'/users/sync'//gjx-guest  
                ).then(function (res) {
                        alert("同步成功")
                        self.tabledata()
                }).catch(function (error) {
                    alert("同步失败，请重试")
                });
            },
            quit(){
                var mobile = getCookie('mobile')
                var data = {'mobile':mobile}
                // 发送一个 POST 请求
                var self = this;
                this.$http.delete(
                    this.url+'/users/session/'+mobile,//gjx-guest
                ).then(function (res) {
                    // console.log(res)
                    // console.log(res.data.code)
                    if(res.data.code == 200){
                        delCookie('mobile')
                        setTimeout(function(){
                            self.$router.push('/')
                        }.bind(self),1000)
                    }else{
                       //登出失败时。。。
                        delCookie('mobile')
                        setTimeout(function(){
                            self.$router.push('/')
                        }.bind(self),1000)
                    }
                    }).catch(function (error) {
                });
            },
            showpower(){
                if(this.pagepower==false){
                    this.pagepower=true;
                }else if(this.pagepower==true){
                    this.pagepower=false
                }
                this.tabledata();
            },
             handleData (data) {
                var hdata = [];
                for (var i = 0; i < data.length; i++) {
                    if(data[i].ispublish==1){data[i].ispublish=true
                    }else if(data[i].ispublish==0){data[i].ispublish=false}

                    if(data[i].issignup==1){data[i].issignup=true
                    }else if(data[i].issignup==0){data[i].issignup=false}

                    if(data[i].isreport==1){data[i].isreport=true
                    }else if(data[i].isreport==0){data[i].isreport=false}

                        hdata.push({
                            id:data[i].id,
                            name: data[i].name,
                            ispublish: data[i].ispublish,
                            issignup: data[i].issignup,
                            isreport: data[i].isreport,
                            email:data[i].email,
                            filed:data[i].filed,
                            workstatus:data[i].workstatus
                        });
                        
					}
					return hdata;
            },
            datachange(datas){
                var datachange = [];
                for (var i = 0; i < datas.length; i++) {
                    if(datas[i].ispublish==true){datas[i].ispublish=1
                    }else if(datas[i].ispublish==false){datas[i].ispublish=0}

                    if(datas[i].issignup==true){datas[i].issignup=1
                    }else if(datas[i].issignup==false){datas[i].issignup=0}

                    if(datas[i].isreport==true){datas[i].isreport=1
                    }else if(datas[i].isreport==false){datas[i].isreport=0}

                        datachange.push({
                            id:datas[i].id,
                            name: datas[i].name,
                            ispublish: datas[i].ispublish,
                            issignup: datas[i].issignup,
                            isreport: datas[i].isreport,
                            email:datas[i].email,
                            filed:datas[i].filed,
                            workstatus:datas[i].workstatus
                        });
                        
                    }
                    var datasave = {
                        "info":datachange
                    }
					return datasave
            },
            tabledata(){
                var self = this;//这是一个坑，注意保存下this确定指向
                self.$http.get(
                    this.url+'/auths/'
                ).then(function (res) {
                        var resd = res.data.data;
                        self.datat =self.handleData(resd);
                    }).catch(function (error) {
                });
            },
             changepwd(){
                this.$router.push('/changePwd')
            },
        }
    }
</script>

<style>
    body{font-size:16px}
    ul{padding:0;}
    ul li{list-style: none}
    .head{
        /* margin: 0 auto; */
        text-align: center
    }
    .mid{
        position: relative;
    }
    .pagectr{
        position: absolute;
        top: 0;
        left: 2%;
    }
    .power{
        width: 80%;
        position: absolute;
        top: 50px;
        left: 18%;
    }
    .power .ivu-table{
        width:100%;
    }
    .btn1{
      float: left;
      margin-left: 18%;
    }
    .btn2{
     float: left;
     margin-left: 1%;
    }
</style>
